<template>
<!-- 登录 -->
  <div class="container">

    <div class="logo"></div>

    <div class="content">
      <form class="mui-input-group">
        <div class="mui-input-row username">
          <i class="icon"></i>
          <input type="number" class="mui-input-clear" placeholder="请输入手机号码" maxlength="11" v-model="userPhone">
        </div>
        <div class="mui-input-row password">
          <i class="icon"></i>
          <input type="password" class="mui-input-password" placeholder="请输入密码" maxlength="20" v-model="password">
        </div>
        <div class="mui-button-row">
          <button type="button" class="mui-btn login-btn" @click="login" >登录</button>
        </div>
      </form>
    </div>

    <div class="other">
      <span class="register" @click="register">注册</span>
      <span class="forgot" @click="forgot">忘记密码</span>
    </div>

    <v-mask :show="isShowLoading">
      <loading :msg="loadingMsg"></loading>
    </v-mask>

  </div>
</template>

<script type="text/ecmascript-6">

import VMask from 'components/v-mask'
import Loading from 'components/loading'

import { login } from 'api/user.js'
import { ERR_OK } from 'api/config.js'

export default {
  data() {
    return {
      userPhone: '',
      password: '',
      isShowLoading: false,
      loadingMsg: '登录中'
    }
  },
  components: {
    VMask,
    Loading
  },
  mounted() {
    mui('.mui-input-row input').input();
  },
  methods: {
    login: function () {
      if (this.userPhone && this.password) {
        this.isShowLoading = true
        login({
          userPhone: this.userPhone,
          password: this.password
        }).then((res) => {
          this.isShowLoading = false
          if (res.code == ERR_OK) {
            mui.toast('登录成功')

            localStorage.userInfo = JSON.stringify(res.object)
            this.$store.state.userInfo = res.object

            console.log(this.$store.state.userInfo)
            this.$router.push({
              path: '/index'
            })
          } else {
            mui.toast(res.object)
          }
        }).catch((res) => {
          this.isShowLoading = false
          console.log('请求超时，请检查网络')
        }) 
      }
    },
    register: function () {
      this.$router.push({
        path: '/register'
      })
    },
    forgot: function () {
      this.$router.push({
        path: '/forgot'
      })
    }
  },
  computed: {
    isDisabled () {
      if (this.userPhone && this.password) {
        return 'disabled'
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped lang="stylus">

@import '../common/stylus/mixin.styl'
@import '../common/stylus/variable.styl'

.container
  position fixed
  width 100%
  height 100%
  background-color #fff
  .logo
    width 116px
    height 116px
    border-radius 50%
    background-color $color-theme
    margin 50px auto
  .content
    margin 0 30px  
    .username, .password
      display flex
      align-items center
      height 50px
      font-size $font-size-medium
      border-bottom-1px(#999) 
      .icon
        width 15px
      input 
        flex 1
        height 50px
        padding-left 10px
        font-size $font-size-medium
    .username
      .icon 
        height 26px
        bg-image('../common/images/phone')
        background-size 15px 26px
    .password
      margin-top 20px
      .icon
        height 21px   
        bg-image('../common/images/password') 
        background-size 15px 21px
    .login-btn
      width 100%
      height 45px
      margin-top 40px
      background-color $color-theme
      color #fff
      font-size $font-size-medium-x
      disabled()
  .other
    display flex
    justify-content space-between
    margin 20px 30px 0
    color #666
    font-size $font-size-small

</style>
